import React from 'react'
import BaseComponent from 'basecomponent'
import FuncButton from "func-button";
import {Form,Cascader} from 'antd';
import apis from 'apis'
import icons from 'icons'
import './style.scss'
import LinkNavbar from 'link-navbar'
import {grideType,gradeType} from 'utils/staticType'
import appConfig from 'config'
import store from 'store'
import auth from 'auth'
const typeName = ['FirstTag','SecondTag','ThirdTag'];


class Major extends BaseComponent{
  constructor() {
    super(...arguments);
    this.state= {
      bachelorData:[], //本科
      juniorData:[], //专科
      masterData:[], //硕士
    }
  }
  componentDidMount(){
    this.getMajorDictList(grideType.bachelor,true)
    this.getMajorDictList(grideType.junior,true)
    this.getMajorDictList(grideType.master,true)
  }

  getMajorDictList(parent,init,targetParent,targetOption){
    const {bachelorData,juniorData,masterData} =this.state
    if(!init){this.majorDListRP.request.abort()}
    this.majorDListRP = apis.majordict.getMajorDictList(parent);
    this.registerRequest(this.majorDListRP.request);
    this.majorDListRP.promise
      .then((res)=>{
        let data = res.Data || [];
        if(init){
          let optionData = data.map(function (item) {
            return {
              value:item.Id,
              label:item.FirstTag,
              origin:item,
              isLeaf: false,
            }
          })
          if(parent === grideType.bachelor){ //本科
            this.setState({bachelorData:optionData})
          }
          if(parent === grideType.junior){ //专科
            this.setState({juniorData:optionData})
          }
          if(parent === grideType.master){ // 硕士
            this.setState({masterData:optionData})
          }
        } else {
          if(targetOption){
            let optionData = data.map(function (item) {
              return {
                value:item.Id.toString(),
                label:item[typeName[item.Type - 1]],
                origin:item,
                isLeaf: item.Type === typeName.length,
              }
            })
            targetOption.children = optionData
            if(targetParent === grideType.bachelor){
              this.setState({bachelorData:[...bachelorData]})
            }
            if(targetParent === grideType.junior){ //专科
              this.setState({juniorData:[...juniorData]})
            }
            if(targetParent === grideType.master){ // 硕士
              this.setState({masterData:[...masterData]})
            }
          }
        }
      })
      .catch((err)=>{
        alert(err.msg)
      })
  }
  handleLoadData(parent,selectedOptions){
    const targetOption = selectedOptions[selectedOptions.length - 1];
    this.getMajorDictList(targetOption.value,false,parent,targetOption)
    this.handleOptionChange(selectedOptions)
  }

  onChange(value, selectedOptions){
    this.handleOptionChange(selectedOptions)
  }

  handleOptionChange(selectedOptions){
    if(selectedOptions){
      let option = selectedOptions[selectedOptions.length - 1].origin
      if(option.Type === 3 || option.Type === '3'){
        let url = option.ThirdTagImage ? `${appConfig.apiHost}/File/?pid=${option.ThirdTagImage}&key=${auth.getFileToken()}`: null
        this.setState({showDrop:true , addImagePreview:url})
      }else{
        this.setState({showDrop:false, addImagePreview: null})
      }
      this.props.form.setFieldsValue({
        Type: option.Type.toString(),
        Grade: option.Grade.toString(),
        FirstTag: option.FirstTag? option.FirstTag:'',
        SecondTag: option.SecondTag? option.SecondTag:'',
        ThirdTag: option.ThirdTag? option.ThirdTag:''
      })
      this.setState({majorID:option.Id})
    }
  }
  
  deleteMajorDict(){
    let majorID = this.state.majorID
    if(majorID > 0){
      this.deleteRP && this.deleteRP.request.abort()
      this.deleteRP = apis.majordict.deleteMajorDict(majorID) // channel keywords tag
      this.registerRequest(this.deleteRP.request);
      this.deleteRP.promise
      .then((res)=>{
        alert('删除成功')
      })
      .catch((err)=>{
        if(err.code === -6){
          alert('先删除相关的专业')
        }else{
          alert('删除出错')
        }
      })
    }
  }
  render() {
    const {children} = this.props;
    const {bachelorData,juniorData,masterData, addImagePreview} = this.state;
    return (
      <div className={'class-major-page'}>
        <LinkNavbar props={this.props}/>
        {children ? children :
          <div className={'class-major-content'}>
            <FuncButton wrapperName={'class-major-FucBtn'}
                        leftText={'添加'}
                        leftTo={{pathname:'/home/class/job/addMajor'}}
                        rightText={'删除'}
                        rightTo={this.deleteMajorDict.bind(this)} 
            >
            </FuncButton>
            <div className={'select-div'}>
              <Cascader className={'level-select '}
                        size={'large'}
                        options={bachelorData}
                        loadData={this.handleLoadData.bind(this,grideType.bachelor)}
                        onChange={this.onChange.bind(this)}
                        placeholder={'本科专业'}
                        notFoundContent={'-'}>
              </Cascader>
              <Cascader className={'batch-select'}
                        size={'large'}
                        options={juniorData}
                        loadData={this.handleLoadData.bind(this,grideType.junior)}
                        onChange={this.onChange.bind(this)}
                        placeholder={'专科专业'}
                        notFoundContent={'-'}>
              </Cascader>
              <Cascader className={'category-select'}
                        size={'large'}
                        options={masterData}
                        loadData={this.handleLoadData.bind(this,grideType.master)}
                        onChange={this.onChange.bind(this)}
                        placeholder={'硕士专业'}
                        notFoundContent={'-'}>
              </Cascader>
            </div>
            {addImagePreview && <img className={'music-pic'} src={addImagePreview}/>}
          </div>
        }
      </div>
    );
  }
}
module.exports =  Form.create()(Major)
